import React, { useState } from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';
import Colors from '@/Themes/Colors';

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    padding: 10,
    // borderColor: Colors.green500,
    borderColor: '#87CEFA',

    borderWidth: 1,
  },
  selectedBtn: {
    // backgroundColor: 'rgba(7, 185, 3, 1)',
    backgroundColor: '#87CEFA',
    //Colors.green600,
  },
});

export default function RadioButtonGroup({ options, onChange, value }) {
  const [rdValue, setRadioValue] = useState(value);
  const handlePress = (newRd) => {
    setRadioValue(newRd);
    if (onChange) {
      onChange(newRd);
    }
  };
  return options.map((opt) => (
    <TouchableOpacity
      style={[styles.button, opt.value === rdValue ? styles.selectedBtn : null]}
      onPress={() => handlePress(opt.value)}
      key={opt.value}
    >
      <Text>{opt.text}</Text>
    </TouchableOpacity>
  ));
}
